<%--
  Created by IntelliJ IDEA.
  User: ling
  Date: 2021-12-30
  Time: 16:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>菜单列表</title>
</head>
<body>
    <div class="container">
        <div id="toolbar">
            <form class="form form-inline">
                <div class="form-group">
                    <label for="mid" class="control-label">菜单名:</label>
                    <input type="text" id="mid" class="form-control">
                </div>
                <input type="button" id="selmenu" value="查询" class="btn btn-success">
            </form>
        </div>
    </div>

    <a class="btn btn-warning" data-toggle="modal" data-target="#addmenu">添加</a>

    <table id="tabmenu" class="table table-striped table-bordered table-hover table-condensed text-center">

    </table>

    <!-- 添加的模态框 -->
    <div id="addmenu" data-backdrop="static" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 标题 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title text-center">菜单添加</h4>
                </div>
                <!-- 添加form布局 -->
                <div class="modal-body">
                    <form class="form form-horizontal">
                        <div class="form-group">
                            <label for="firstmenu" class="col-md-2 text-right control-label">一级菜单:</label>
                            <div class="col-md-10">
                                <select id="firstmenu" name="parentId" class="form-control">
                                    <option value="0">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="secondmenu" class="col-md-2 text-right control-label">二级菜单:</label>
                            <div class="col-md-10">
                                <select id="secondmenu" name="parentId" class="form-control" disabled>
                                    <option value="0">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addnamanu" class="col-md-2 text-right control-label">菜单名:</label>
                            <div class="col-md-10">
                                <input class="form-control" type="text" name="name" id="addnamanu" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addurlink" class="col-md-2 text-right control-label">地址:</label>
                            <div class="col-md-10">
                                <input class="form-control" type="text" name="linkUrl" id="addurlink" />
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 添加按钮 重置按钮 关闭按钮 -->
                <div class="modal-footer">
                    <input type="button" class="btn btn-warning" id="realaddmenu" value="添加">
                    <input type="button" class="btn btn-warning" data-dismiss="modal" value="关闭">
                </div>

            </div>
        </div>
    </div>

    <!-- 编辑的模态框 -->
    <div id="editmenu" data-backdrop="static" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 标题 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title text-center">菜单编辑</h4>
                </div>
                <!-- 编辑form布局 -->
                <div class="modal-body">
                    <form class="form form-horizontal">
                        <input type="hidden" id="hideditid" name="id">
                        <div class="form-group">
                            <label for="parentmenuss" class="col-md-2 text-right control-label">父菜单:</label>
                            <div class="col-md-10">
                                <select id="parentmenuss" name="parentId" class="form-control">
                                    <option value="0">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editnamanu" class="col-md-2 text-right control-label">菜单名:</label>
                            <div class="col-md-10">
                                <input class="form-control" type="text" name="name" id="editnamanu" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editurlink" class="col-md-2 text-right control-label">地址:</label>
                            <div class="col-md-10">
                                <input class="form-control" type="text" name="linkUrl" id="editurlink" />
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 编辑按钮 关闭按钮 -->
                <div class="modal-footer">
                    <input type="button" class="btn btn-warning" id="lpleditmenu" value="编辑">
                    <input type="button" class="btn btn-warning" data-dismiss="modal" value="关闭">
                </div>

            </div>
        </div>
    </div>

    <script>
        var params={
            url:"${pageContext.request.contextPath}/sysmenus.action",
            method: 'GET',                      //请求方式（*）
            toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 5,                     //每页的记录行数（*）
            pageList: [5, 10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: false,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            queryParams: function (params) {
                //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                var temp = {
                    pagesize: params.limit,                         //页面大小
                    pageno: (params.offset / params.limit) + 1,   //页码
                    name: $("#mid").val()  //查询条件
                };
                return temp;
            },
            columns:[
                {
                    title:"编号",
                    field:"id"
                },
                {
                    title:"菜单",
                    field:"name"
                },
                {
                    title:"菜单地址",
                    field:"linkUrl"
                },
                {
                    title:"操作",
                    field: "",
                    formatter:function (value, row, index) {
                        return "<input type='button' value='编辑' onclick='editme("+row.id+")' class='btn btn-warning'>"+"&nbsp;" +
                            "<input type='button' value='删除' onclick='delme("+row.id+")' class='btn btn-danger' >";
                    }
                }
            ]
        };
        $("#tabmenu").bootstrapTable(params)
        //条件查询
        $("#selmenu").click(function () {
            //刷新表格数据
            $("#tabmenu").bootstrapTable("refresh");
        })
        function delme(id) {
            if (confirm("您确定要删除吗?")){
                $.ajax({
                    url:"${pageContext.request.contextPath}/sysmenus.action/"+id,
                    type:"delete",
                    dateType:"json",
                    success: function (date) {
                        alert(date.msg)
                        $("#tabmenu").bootstrapTable("refresh");
                    }
                });
            }
        }

        $(function () {
            $.post("${pageContext.request.contextPath}/lplsysmenus.action",{pid:0},function (data) {
                for (var i = 0; i <data.length ; i++) {
                    var top="<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                    $("#firstmenu").append(top)
                }
            },"json")
        })
        $("#firstmenu").change(function () {
            var id=$("#firstmenu").val()
            if ($("#firstmenu").val()==0){
                $("#secondmenu").attr("disabled",true)
                $("#secondmenu>option").attr("value",0)
            }else{
                $("#secondmenu").attr("disabled",false)
                $("#secondmenu")[0].length=1;
                $("#secondmenu>option").attr("value",id)
                $.post("${pageContext.request.contextPath}/lplsysmenus.action",{pid:id},function (data) {
                    for (var i = 0; i <data.length ; i++) {
                        var top="<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                        $("#secondmenu").append(top)
                    }
                },"json")
            }
        })
        $("#realaddmenu").click(function () {
            var menuname=$("#addnamanu").val();
            var firstmenu=$("#firstmenu").val();
            var secondmenu=$("#secondmenu").val();
            var pid=null;
            var url=$("#addurlink").val();
            if(firstmenu==0 && secondmenu==0){
                pid=0;
            }
            if(firstmenu==secondmenu){
                pid=firstmenu;
            }
            if(firstmenu!=0 && secondmenu!=0){
                pid=secondmenu;
            }
            var addmenudata={name:menuname,parentId:pid,linkUrl:url}
            $.post("${pageContext.request.contextPath}/sysmenus.action",addmenudata,function (data) {
                alert(data.msg)
                $("#addmenu").modal("hide");
                $("#tabmenu").bootstrapTable("refresh");
            },"json")
        })
        function editme(id) {
            $("#editmenu").modal("show");
            $(function () {
                load()
            })
            function load() {
                setTimeout(function () {
                    $.get("${pageContext.request.contextPath}/sysmenus.action/"+id,function (data) {
                        $("#hideditid").val(data.id);
                        $("#editnamanu").val(data.name);
                        $("#editurlink").val(data.linkUrl);
                        $("#parentmenuss option").each(function (item) {
                           if ($(this).val()==data.parentId){
                              $(this).attr("selected","selected")
                           }
                        })
                    },"json")
                },200)
                $.get("${pageContext.request.contextPath}/querymenus.action",function (data) {
                    for (var i = 0; i <data.length ; i++) {
                        var top="<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                        $("#parentmenuss").append(top)
                    }
                },"json")
            }
        }
        $("#lpleditmenu").click(function () {
            var editbyid=$("#hideditid").val();
            var menuparentid=$("#parentmenuss").val();
            var namenu=$("#editnamanu").val();
            var addrmenu=$("#editurlink").val();
            var editmenudata={id:editbyid,parentId:menuparentid,name:namenu,linkUrl:addrmenu};
            $.ajax({
                url:"sysmenus.action",
                data:JSON.stringify(editmenudata),
                type:"put",
                dataType:"json",
                contentType:"application/json",
                success:function (data) {
                    alert(data.msg);
                    $("#editmenu").modal("hide");
                    $("#tabmenu").bootstrapTable("refresh");
                }
            })
        })
    </script>
</body>
</html>
